<template>
  <nav class="mui-bar mui-bar-tab">
    <router-link class="mui-tab-item" to="/home">
      <span class="mui-icon mui-icon-home"></span>
      <span class="mui-tab-label">首页</span>
    </router-link>
    <router-link class="mui-tab-item" to="/all">
      <span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
      <span class="mui-tab-label">全部</span>
    </router-link>
    <router-link class="mui-tab-item" to="/mine">
      <span class="mui-icon mui-icon-contact mui-icon-icon-contact-filled"></span>
      <span class="mui-tab-label">我的</span>
    </router-link>
  </nav>
</template>

<script>
// 引入 mui 的css样式
import './muiDist/css/mui.min.css';
import './muiDist/css/icons-extra.css';
export default {
    name:"tabbar",

}
</script>

<style lang="less" scoped>
@fontColor:#4fc08d;
.mui-bar-tab{
    .mui-tab-item.mui-active{
      color:@fontColor;
    }
}
</style>
